<template>
  <view class="container">

    <!-- 任务信息卡片 -->
    <view class="task-card">
      <view class="card-header">跑腿信息</view>
      <view class="card-body">
        <view class="info-item">
          <view class="item-label">跑腿标题：</view>
          <view class="item-value" style="color: #757575;">{{ taskInfo.title }}</view>
        </view>
        <view class="info-item">
          <view class="item-label">跑腿类型：</view>
          <view class="item-value" style="color: #757575;">{{ getTaskTypeText(taskInfo.type) }}</view>
        </view>
        <view class="info-item">
          <view class="item-label">跑腿金额：</view>
          <view class="item-value text-red">¥{{ taskInfo.price }}</view>
        </view>
		<view class="info-item">
		  <view class="item-label">跑腿图片：</view>
		  <view class="item-value " style="width: 65%;flex-wrap: wrap; gap: 10rpx; display: flex;grid: 2;">
			  <image @click="previewImage(JSON.parse(taskInfo.image),index)" style="width: 100rpx;height: 100rpx; border-radius: 15rpx; " v-for="(item,index) in JSON.parse(taskInfo.image)" :key="index" :src="item.url"></image>
		  </view>
		</view>
		<view class="info-item">
		  <view class="item-label">跑腿描述：</view>
		  <view class="item-value " style="color: #757575;">{{ taskInfo.remark || '暂无描述~'}}</view>
		</view>
		<view class="info-item">
		  <view class="item-label">联系方式：</view>
		  <view class="item-value " style="color: #757575;">{{ taskInfo.contact }}</view>
		</view>
      </view>
    </view>

    <!-- 支付方式选择 -->
     <view class="payment-methods">
          <view class="card-header">选择支付方式</view>
          <view class="method-item" 
                @click="selectPaymentMethod(1)"
                :class="{ 'active': selectedPaymentMethod === 1 }">
            <view class="method-left">
              <image src="/static/wechatpay.png" mode="aspectFit"></image>
              <view class="method-name">微信支付</view>
            </view>
            <view class="method-right">
              <u-icon v-if="selectedPaymentMethod === 1" name="checkmark" size="18" color="#07C160"></u-icon>
            </view>
          </view>
         
          <view class="method-item" 
                @click="selectPaymentMethod(3)"
                :class="{ 'active': selectedPaymentMethod === 3 }">
            <view class="method-left">
              <image src="/static/wallet.png" mode="aspectFit"></image>
              <view class="method-name">余额支付</view>
            </view>
            <view class="method-right">
             <u-icon v-if="selectedPaymentMethod === 3" name="checkmark" size="18" color="#07C160"></u-icon>
            </view>
          </view>
        </view>

    <!-- 优惠券选择 -->
    <view class="coupon-section" @click="navigateToCoupon">
      <view class="coupon-left">
        <uni-icons type="ticket" size="18" color="#FF5722"></uni-icons>
        <view class="coupon-text">优惠券</view>
      </view>
      <view class="coupon-right">
        <view class="coupon-amount" v-if="couponAmount > 0">-¥{{ couponAmount.toFixed(2) }}</view>
        <view class="coupon-amount" v-else>暂无优惠券 ~</view>
        <uni-icons type="right" size="18"></uni-icons>
      </view>
    </view>

    <!-- 金额汇总 -->
    <view class="amount-summary">
      <view class="summary-item">
        <view class="summary-label">任务金额：</view>
        <view class="summary-value">¥{{ taskInfo.price }}</view>
      </view>
      <view class="summary-item" v-if="couponAmount > 0">
        <view class="summary-label">优惠券：</view>
        <view class="summary-value text-green">-¥{{ couponAmount.toFixed(2) }}</view>
      </view>
      <view class="summary-item total">
        <view class="summary-label">实付金额：</view>
        <view class="summary-value text-red font-bold">¥{{taskInfo.price }}</view>
      </view>
    </view>

    <!-- 支付按钮 -->
    <view class="payment-btn" @click="payNow">
      确认支付 ¥{{ taskInfo.price  }}
    </view>

    <!-- 支付结果弹窗 -->
    <view class="result-modal" v-if="showResultModal">
      <view class="modal-content">
        <view class="result-icon" :class="paymentSuccess ? 'success' : 'fail'">
          <uni-icons :type="paymentSuccess ? 'checkmark-circle-filled' : 'close-circle-filled'" size="60"></uni-icons>
        </view>
        <view class="result-title">{{ paymentSuccess ? '支付成功' : '支付失败' }}</view>
        <view class="result-message">{{ paymentMessage }}</view>
        <view class="result-actions">
          <button class="action-btn" @click="closeResultModal">
            {{ paymentSuccess ? '返回任务列表' : '重新支付' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      taskInfo: {},
      selectedPaymentMethod: 1, // 1-微信支付，2-支付宝，3-余额支付
      couponAmount: 0.00, // 优惠券金额
      showResultModal: false,
      paymentSuccess: false,
      paymentMessage: '',
      loading: false,
	  getTaskType:[]
    }
  },
  onLoad(options) {
    // 从页面参数获取任务ID
    if (options.taskId) {
      this.getTaskDetail(options.taskId);
    }
    this.getPaoType()
  },
  methods: {
	  async getPaoType(){
	  	const res = await this.$api.get('/PaoType/list','',true)
	  	if(res.data.code === 200) {
	  		res.data.data.forEach(item => {
	  			this.getTaskType.push({
	  				name:item.name,
	  				id:item.id
	  			})
	  		})
	  	}
	  },
	previewImage(mediaList,index){
		console.log('----',mediaList)
		const urls = mediaList.map(media => media.url)
		uni.previewImage({ urls, current: urls[index] })
		
	},
    // 获取任务详情
    async getTaskDetail(taskId) {
		const res = await this.$api.get('/pao/detail',{id:taskId},true)
		if(res.data.code === 200) {
			this.taskInfo = res.data.data
		}
      
    },
    
    // 获取任务类型文本
    getTaskTypeText(type) {
	  let typeMap = '';
	  this.getTaskType.forEach(item =>{
		  if(item.id == type){
			  typeMap = item.name
		  }
	  })
      
      return typeMap || '未知类型';
    },
    
    // 选择支付方式
    selectPaymentMethod(method) {
      this.selectedPaymentMethod = method;
    },
    
    // 跳转到优惠券页面
    navigateToCoupon() {
      // 实际项目中跳转到优惠券选择页面
      uni.showToast({
        title: '暂无优惠券',
        icon: 'none'
      });
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    
    // 立即支付
    async payNow() {
      if (this.loading) return;
      
      this.loading = true;
      
      // 模拟支付过程
      uni.showLoading({
        title: '支付处理中...'
      });
	  const payInfo = {
	  		  id:this.taskInfo.id,
	  		  title:this.taskInfo.title,
	  		  price:this.taskInfo.price,
	  		  type:this.taskInfo.type,
	  		  pao_order:this.taskInfo.pao_order,
	  		  selectedPaymentMethod:this.selectedPaymentMethod
	  }
	  
	  
      const res = await this.$api.post('/pao/apply',payInfo,true)
	  if(res.data.code === 200) {
		  console.log('----',res.data)
		  if(this.selectedPaymentMethod == 1) {
		  		uni.requestPayment({
		  			provider: 'wxpay',
		  			timeStamp: res.data.data.timeStamp,
		  			nonceStr: res.data.data.nonceStr,
		  			package: res.data.data.package,
		  			signType: res.data.data.signType,
		  			paySign: res.data.data.paySign,
		  			success: (res) => {
		  				console.log('支付成功', res);
		  				uni.hideLoading()
						this.loading = false;
						this.paymentSuccess = 'success' 
						this.paymentMessage = '支付成功，任务已发布！' ;
						this.showResultModal = true;
		  				// 跳转到订单页
		  				// uni.navigateTo({ url: '/pages/mine/order/detail?id='+this.order.order_no });
		  			},
		  			fail: (err) => {
		  				console.error('支付失败', err);
		  				uni.hideLoading()
						this.loading = false;
						this.paymentSuccess = 'fail'
						this.paymentMessage = '支付失败，请重试' ;
						this.showResultModal = true;
		  			}
		  		});  
		  } else {
		  		uni.hideLoading()
				this.loading = false;
				this.paymentSuccess = 'success' 
				this.paymentMessage = '支付成功，任务已发布！' ;
				this.showResultModal = true;
		  }
		 
	  } else {
		  uni.hideLoading()
		  this.loading = false;
		  this.paymentSuccess = 'fail'
		  this.paymentMessage = '支付失败，请重试' ;
		  this.showResultModal = true;
	  }
      
    },
    
    // 关闭结果弹窗
    closeResultModal() {
      this.showResultModal = false;
      
      if (this.paymentSuccess) {
        // 返回任务列表
        uni.reLaunch({
        	url:'/pagesA/errand-order-list'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #F5F5F5;
  min-height: 100vh;
}

.navbar {
  height: 44px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid #EEEEEE;
  
  .nav-left {
    width: 40px;
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
  }
}

.task-card, .payment-methods {
  background-color: #FFFFFF;
  margin: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding: 15px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #EEEEEE;
}

.card-body {
  padding: 15px;
}

.info-item {
  display: flex;
  padding: 8px 0;
  
  .item-label {
    width: 80px;
    color: #666666;
  }
  
  .item-value {
    flex: 1;
  }
}

.text-red {
  color: #FF5722;
}

.text-green {
  color: #07C160;
}

.font-bold {
  font-weight: bold;
}

.payment-methods {
  .method-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #EEEEEE;
    cursor: pointer;
    transition: background-color 0.2s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.active {
      background-color: rgba(7, 193, 96, 0.05);
    }
    
    .method-left {
      display: flex;
      align-items: center;
      width: 90%;
      image {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
      
      .method-name {
        font-size: 16px;
      }
    }
    
    .method-right {
      width: 10%;
      display: flex;
	  justify-content: right;
    }
  }
}

.coupon-section {
  background-color: #FFFFFF;
  margin: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  
  .coupon-left {
    display: flex;
    align-items: center;
    
    uni-icons {
      margin-right: 10px;
      color: #FF5722;
    }
  }
  
  .coupon-right {
    display: flex;
    align-items: center;
    
    .coupon-amount {
      margin-right: 10px;
      color: #FF5722;
    }
  }
}

.amount-summary {
  background-color: #FFFFFF;
  margin: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  padding: 15px;
  
  .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    
    &.total {
      font-size: 18px;
      padding-top: 15px;
      border-top: 1px solid #EEEEEE;
      margin-top: 10px;
    }
  }
}

.payment-btn {
  background-color: #FF5722;
  color: #FFFFFF;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  margin: 30px 15px;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.2);
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 87, 34, 0.3);
  }
}

.result-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  transition: opacity 0.3s;
  
  .modal-content {
    background-color: #FFFFFF;
    width: 80%;
    max-width: 300px;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s;
    
    .result-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 20px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      
      &.success {
        background-color: rgba(7, 193, 96, 0.1);
        color: #07C160;
      }
      
      &.fail {
        background-color: rgba(255, 87, 34, 0.1);
        color: #FF5722;
      }
    }
    
    .result-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .result-message {
      color: #666666;
      margin-bottom: 20px;
    }
    
    .result-actions {
      .action-btn {
        background-color: #FF5722;
        color: #FFFFFF;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
  
  &:active .modal-content {
    transform: scale(1);
  }
}
</style>